<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的考试</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
		  body {
		    background-color: #fff;
		  }
		
		  .list {
		    padding: 15px;
			border:1px solid #dcdcdc;
			margin:15px 0 0;
			border-radius: 3px;
			box-shadow: 0px 2px 4px #dcdcdc;
		  }
		
		  .list:first-child {
		    /* margin-top: 15px; */
		  }
		
		  .list+.list {
		    
		  }
		
		  .tag-sm {
		    padding: 2px 15px;
		  }
		
		  .bg-grey {
		    background-color: #8799a3;
		  }
		
		  /* .title span{
		    border-left: 3px solid #F29B76;
		    padding-left: 4px;
		  } */
		  .list p {
		    margin-bottom: 2px;
		  }
		
		  .label {
		    border-left: 3px solid #DE722C;
		    padding-left: 0.5rem;
		  }
		  .text-df{
			  color: #1A4B82;
		  }
		  .border-bottom {
		    border-bottom: 1px solid #C1D9EF;
		  }
		
		  .btn {
		    display: inline-block;
		    padding: 0.2rem 1.2rem;
		    font-size: 0.8rem;
		    color: #1A4B82;
		    border: 1px solid #1A4B82;
		    border-radius: 3rem;
		  }
		  .box-left,.box-right{
			  padding-bottom:10px;
		  }
		  .text-grey{
			  
		  }
		  .box-left{
			  width: 82%;
		  }
		  .box-right{
			  width: 18%;
		  }
		  .box-max{
			  width: 100%;
			  padding-top: 12px;
		  }
		  .box-max button{
			  padding:4px 20px;
			  border-radius: 20px;
			  color: #275EB1;
			  font-weight:200;
			  border-color: #C8D9EC;
		  }
		  .box-max button.no-border{
			  border: none;float: right;
		  }
		  .box-max button.no-border span{
			  font-weight: 400;
			  font-size: 1.3em;
		  }
		  .box-right img{
			  width: 100%;height: auto;
		  }
		  .text-cut-two{
		    text-overflow: -o-ellipsis-lastline;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    line-clamp: 2;
		    -webkit-box-orient: vertical;
		    white-space: normal;
		  }
		</style>
	</head>
	<body>
		<div id="container" class="container" v-cloak>
			<header class="mui-bar mui-bar-nav">
			  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			  <h1 class="mui-title">我的考试</h1>
			  <a class="mui-icon mui-icon-right-nav mui-pull-right" @click="nextStep"
			  href="javascript:;"><font size="3" color="#fff">下一步</font></a>
			</header>
			
			<div id="refreshContainer" class="mui-scroll-wrapper bg-white mui-content">
				<div class="mui-scroll" style="height: calc(100% - 50px);overflow-y: auto;">
				  <div class="padding-lr">
				    <div class="list" v-for="item in list" :key="item.id">
					<div class="flex border-bottom" @click.top="detail(item)">
						  <div class="box-left">
							  <div class="text-cut flex-sub">
								<div class="text-df text-cut">{{item.name}}</div>
								<div class="flex padding-top-sm" style="flex-wrap: wrap-reverse;">
								  <div class="text-sm padding-right-sm">时长：{{item.duration}}分钟</div>
								
								  <div class="text-sm padding-right-sm">总分：{{item.totalScore || 0}}</div>
								  <div class="text-sm padding-right-sm">及格分：{{item.passScore}}</div>
								</div>
								
							  </div>
						  </div>
						  <div class="box-right">
							  <img v-if="item.score!==null && item.pass" src="../img/finish.png">
							 <img v-else-if="item.score!==null && !item.pass" src="../img/back.png">
						  </div>
					  </div>
					  <div class="box-max">
						  <button v-if="!item.pass" type="button" class="mui-btn" @click.stop="resetExam(item.id)"><span><img style="width:19%;" src="../img/chongkao.jpg"/></span>&nbsp;{{item.score==null?'考试':'重考'}}</button>
						  <button class="mui-btn" style="opacity: 0;" @click.top="" v-else><span class="mui-icon mui-icon mui-icon-compose"></span></button>
						  
						  <button type="button" class="mui-btn no-border" v-if="item.score!==null"><span>{{item.score}}</span>分</button>
						  
					  </div>
					  
				    </div>
					
					<div class="padding text-center" v-if="list.length===0">
					  <p>暂无数据</p>
					</div>
				  </div>
				</div>
				
			</div>
		</div>
<script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../formal/js/api.js"></script>
    <script type="text/javascript">
      var htapi = new HTGlobal();
      var user = JSON.parse(localStorage.getItem('outUser'));//当前用户信息
      var exam = null;
      var size = 15;
      var page = 0;
      
      mui.plusReady(function() {
        load();
      })
      exam = new Vue({
        el: '#container',
        data: {
			//{score:100,passScore:10111,name:'1231231232',duration:100,totalScore:800}
          list: []
        },
        methods:{
          detail(item){
            if(item.score!==null){
              mui.openWindow({
                url: './examDetail.html',
                id: './examDetail.html',
                extras: {
                  pageId: item.userPaperResultId
                }
              });
              return
            }
            mui.openWindow({
              url: './exam.html',
              id: './exam.html',
              extras: {
                pageId: item.id
              }
            });
          },
          resetExam(id){
            mui.openWindow({
              url: './exam.html',
              id: './exam.html',
              extras: {
                pageId: id
              }
            });
          },
		  nextStep(){
			  //前往下一步操作
			  var action = function(){
				  mui.openWindow({
					url: '../home/home-safe.html',
					id: './home-safe.html',
					extras: {},
					waiting: {
					  autoShow: false
					}
				 });
			 }
			 htapi.getStatus(action)
		  }
        }
      })
      //页面加载
      function load(){
        htapi.fetch({
          projectId: user.currentProjectId,
          appUserId: user.id,
          // appUserId: '1660',
          // projectId: '26'
        }, function(data) {
          console.log('课程页面'+JSON.stringify(data))
          if(data.code=='0'){
            exam.list = exam.list.concat(data.data)
            
          }else{
			  mui.toast(data.msg)
		  }
          
        }, '加载中', 'exam')
      }
      window.addEventListener('examRefresh',function(event){
        console.log('刷新')
        exam.list=[]
      	load();	 
      });
    </script>
	</body>
</html>
